<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useGetProjectInfo } from '../composables/useGetProjectInfo'
import { baseUrl } from '../config'
import ProjectMenu from './ProjectMenu.vue'
import { MenuItem } from '../enum/menuEnum'
import AggregateRootList from './AggregateRootList.vue'
import router from '@/router'

const route = useRoute()
const projectId = Number(route.params.projectId)
const menu = ref(MenuItem.AggregateRoot)

const showAggregateRoot = ref(true)
const showProjectEnum = ref(false)
const showProjectConfig = ref(false)

const { info, loading, error, fetchInfo } = useGetProjectInfo(baseUrl, { id: projectId })
const generatedCode = ref("");

onMounted(() => {
  fetchInfo()
})

// 复制代码功能
function copyCode() {
  navigator.clipboard.writeText(generatedCode.value)
    .then(() => {
      alert('代码已复制到剪贴板')
    })
}

function handleMenuClick(selectedMenu: MenuItem) {
  menu.value = selectedMenu;
  if (selectedMenu === MenuItem.CloseProject) {
    router.push('/')
    switchMenuStatus(MenuItem.AggregateRoot);
    return;
  }
  switchMenuStatus(selectedMenu);
}

function switchMenuStatus(menu: MenuItem) {
  if (menu === MenuItem.AggregateRoot) {
    showAggregateRoot.value = true;
    showProjectEnum.value = false;
    showProjectConfig.value = false;
  } else if (menu === MenuItem.ProjectEnum) {
    showAggregateRoot.value = false;
    showProjectEnum.value = true;
    showProjectConfig.value = false;
  } else if (menu === MenuItem.ProjectConfig) {
    showAggregateRoot.value = false;
    showProjectEnum.value = false;
    showProjectConfig.value = true;
  }
}

</script>

<template>
  <div class="project-detail">
    <ProjectMenu :project-name="info?.name || '项目详情'" :menu="menu" @menu-click="handleMenuClick" />
    <main class="detail-content">
      <div v-if="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else-if="info">
        <AggregateRootList v-if="showAggregateRoot" :project-id="projectId"></AggregateRootList>
        <div v-if="showProjectEnum">项目枚举</div>
        <div v-if="showProjectConfig">项目配置</div>
      </div>
      <div v-else>未找到项目</div>
    </main>
  </div>
</template>

<style scoped>
.project-detail {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.detail-content {
  padding: 0px;
  margin: 0 0 0 200px;
  height: 100%;
  flex: 1;
}

.actions {
  text-align: center;
  margin: 20px 0;
}

.actions button {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
</style>
